<template>
    <Drawer :open="show" title="编辑"  @close="drawerClose" :width="width">
        <Form ref="formRef" layout="vertical" :rules="rules" :model="model">
            <slot name="header"></slot>
            <Row v-if="layout === 'horizontal'" :gutter="16" v-for="(item, index) in items" :key="index">
                <Col :span="12" v-for="(child, childIndex) in item" :key="childIndex" >
                    <Group v-if="child.isShow" :item="child" :model="model" />
                </Col>
            </Row>
            <div v-if="layout === 'vertical'" v-for="(item, index) in items" :key="index">
                <Group v-if="item.isShow" :item="item" :model="model" @uploadSuccess="uploadSuccess"/>
            </div>
            <slot name="bottom"></slot>
        </Form>
        <template #extra >
            <Button style="margin-right: 8px" @click="drawerClose">取消</Button>
            <Button type="primary" @click="submit">提交</Button>
        </template>
    </Drawer>
</template>
<script>
    import {Form, FormItem, Drawer,
        Input, Button, Select,
        SelectOption, TreeSelect,
        Row,
        Col,
        message
    } from "ant-design-vue";
    import Group from "./group"

    export default {
        name: 'form',
        components: {
            Form,
            FormItem,
            Drawer,
            Input,
            Select,
            SelectOption,
            TreeSelect,
            Button,
            Row,
            Col,
            Group
        },
        props: {
          show: {
              type: Boolean,
              default: false
          },
          rules: {
              type: Object,
              default: {}
          },
          model: {
              type: Object,
              default: {}
          },
          items: {
              type: Array,
              default: [],
          },
          width: {
              type: Number,
              default: 400
          },
          layout: {
              type: String,
              default: 'vertical'
          }
        },
        data(){
          return {

          }
        },
        methods: {

            submit(){
                this.$refs.formRef.validate().then(res => {
                    this.$parent.submit(res).then(res => {
                        if(res){
                            message.success("保存成功");
                            this.$emit('update:show', false)
                            this.resetField();
                        }
                    })
                }).catch(e =>{
                    console.error(e);
                })
            },

            resetField(){
                this.$refs.formRef?.resetFields();
            },

            /**
             * 上次成功
             * @param files
             */
            uploadSuccess(files){
                this.$emit('uploadSuccess', files);
            },

          /**
           * 上次成功
           * @param files
           */
          drawerClose(){
            this.$emit('update:show', false)
            this.resetField();
          }
        }
    }
</script>
<style scoped lang="scss">

</style>
